<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        offset="50"
        @load="onLoad"
      >
        <!-- 文章列表 -->
        <ArticleItem v-for="item in ArticleList" :key="item.art_id" :articleDetail="item"></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from './ArticleItem.vue'
import { getArticleNewsAPI } from '@/api'
export default {
  components: { ArticleItem },
  props: {
    channelId: Number
  },
  data () {
    return {
      ArticleList: [],
      loading: false,
      isLoading: false,
      finished: false,
      timestamp: new Date().getTime()
    }
  },
  created () {
    this.getArticleList(this.channelId, this.timestamp)
  },
  methods: {
    // 获取文章列表
    async getArticleList (channel_id, timestamp) {
      const res = await getArticleNewsAPI({ channel_id, timestamp })
      this.ArticleList = [...this.ArticleList, ...res.data.data.results]
      this.timestamp = res.data.data.pre_timestamp
      this.loading = false
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }
      this.isLoading = false
    },
    // 底部刷新
    async onLoad () {
      const channel_id = this.channelId
      const timestamp = this.timestamp
      this.getArticleList(channel_id, timestamp)
    },
    // 下拉刷新
    async onRefresh () {
      this.ArticleList = []
      const channel_id = this.channelId
      const timestamp = new Date().getTime()
      this.getArticleList(channel_id, timestamp)
    }
  }
}
</script>

<style>

</style>
